<!DOCTYPE html>
<#assign base=springMacroRequestContext.getContextUrl("")>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>人脸检测展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="${base}/glrStatic/swiper-4.5.0/css/swiper.min.css">

    <!-- Demo styles -->
    <style>

        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;

        }
        .swiper-container {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            height: calc((100% - 30px) / 4);

            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            font-family: arial;
            box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 30px;
            border-radius: 5px;
        }


        .append-buttons {
            text-align: center;
            margin-top: 20px;
        }
        .append-buttons a {
            display: inline-block;
            border: 1px solid #007aff;
            color: #007aff;
            text-decoration: none;
            padding: 4px 10px;
            border-radius: 4px;
            margin: 0 10px;
            font-size: 13px;
        }
        .faceDetect-result__face-info{
            width: 200px;
        }
        .img-box{
            width: 90%;
            height: 90%;
            background-color: #000;
            position: relative;
            overflow: hidden;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
            background-color: #928e8e;
            border-radius: 5px;
            margin-left: 10px;
        }
        .result__item{
            display: block;
            overflow: hidden;
            margin-left: -5px;
            margin-right: -5px;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-weight: 400;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 1;
            margin-left: -4px; margin-right: -4px;
        }

        .result__title {
            font-size: 14px;
            font-weight: bolder;
            color: #3f3f4c;
            line-height: 19px;
            height: 19px;
            width: 20.83333333%;
            float: left;
            padding-left: 4px; padding-right: 4px;
        }
        .result__text{
            line-height: 20px;
            font-size: 11px;
            color: #666;
            line-height: 19px;
            height: 19px;
            position: relative;
            width: 79.16666667%;
            padding-left: 4px; padding-right: 4px;
        }

    </style>



</head>
<body>
	<!-- Swiper -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
	</div>
	<p class="append-buttons" style="display: none">
		<a href="#" class="prepend-2-slides">Prepend 2 Slides</a>
		<a href="#" class="prepend-slide">Prepend Slide</a>
		<a href="#" class="append-slide">Append Slide</a>
		<a href="#" class="append-2-slides">Append 2 Slides</a>
	</p>
	<!-- Swiper JS -->
	<script type="text/javascript" src="${base}/glrStatic/viewOutline/jquery.1.10.2.min.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/viewOutline/ajax.js"></script>
	<script type="text/javascript" src="${base}/glrStatic/swiper-4.5.0/js/swiper.min.js"></script>
	<!-- Initialize Swiper -->
	<script>
        var XAccessToken='${AccessToken}';
		var appendNumber = 0;
		var prependNumber = 1;
		var swiper = new Swiper('.swiper-container', {
			slidesPerView: 4,
            slidesPerColumn: 4,
            spaceBetween: 10,
			centeredSlides: true,
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		});
        swiper.slideTo(0, 1000, false); //到第四个
		document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
			e.preventDefault();
			swiper.prependSlide([
				'<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
				'<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
			]);
		});
		document.querySelector('.prepend-slide').addEventListener('click', function (e) {
			e.preventDefault();
			swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
		});
		document.querySelector('.append-slide').addEventListener('click', function (e) {
			e.preventDefault();
			swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
		});
		document.querySelector('.append-2-slides').addEventListener('click', function (e) {
			e.preventDefault();
			swiper.appendSlide([
				'<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
				'<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
			]);

            swiper.slideTo(appendNumber, 1000, false);
		});

        $(document).ready(function(){
            getFaceDetect(16,0);
            //setInterval(getFaceDetectForTime, 1000);
        });

        var fId_G=0;
        function getFaceDetectForTime(){
            fId_G=parseInt(fId_G);
            if (fId_G>0){
                getFaceDetect(0,fId_G);
			}
        }

        function getFaceDetect(fCount,fId) {
            debugger;
            $.ajax({
                url:'getFaceDetect?X-Access-Token='+XAccessToken,
                data:{fCount:fCount,fId:fId},
                async:false,
                success:function(data){
                    //var d = $.parseJSON(data);
                    var d = data;
                    if (d.success) {
                        if (d.obj.length>0){
                            for(var i=0;i<d.obj.length;i++){
                                var fId1=d.obj[i].id;
                                if (fId1>fId_G){
                                    fId_G=fId1;
                                }

                                var sysOrgCode=d.obj[i].sysOrgCode;  //"/1212/hk__D59087135_20190920103431850_FACE_SNAP.jpg"
                                var userInfo=d.obj[i].userInfo;  //"liuby"
                                var sysCompanyCode=d.obj[i].sysCompanyCode;  //2019-09-20 10:34:31"

                                if (userInfo==null) userInfo="";
                                if (sysOrgCode==null) sysOrgCode="";
                                if (sysCompanyCode==null) sysCompanyCode="";

                                var st1="";
                                st1=st1+'<div class="img-box">\n' +
                                    '<img src="'+sysOrgCode+'" class="" style="width:100%;height:100%;position:absolute;border-radius:5px;top:50%;left:50%;transform:translate(-50%,-50%)">\n' +
                                    '</div>\n';
                                st1=st1+'<div class="faceDetect-result__face-info">';

                                st1=st1+'<div class="result__item">\n' +
                                    '<div class="result__title">\n' +
                                    '<span>时间</span>\n' +
                                    '</div>\n' +
                                    '<div class="result__text" title="id:'+fId1+'">'+sysCompanyCode+'</div>\n' +
                                    '</div>';

                                var score0=d.obj[i].score;
                                if (score0==null) score0="0";
                                var score1=parseFloat(score0);
                                var score2=score1.toFixed(2)+"%";
                                if (score1>=80){
                                    if (userInfo.length>0){
                                        st1=st1+'<div class="result__item">\n' +
                                            '<div class="result__title">\n' +
                                            '<span>用户</span>\n' +
                                            '</div>\n' +
                                            '<div class="result__text">'+userInfo+'('+score2+')</div>\n' +
                                            '</div>';
                                    }
                                }

                                var equipmentSerial=d.obj[i].equipmentSerial;
                                if (equipmentSerial.length>0){
                                    st1=st1+'<div class="result__item">\n' +
                                        '<div class="result__title">\n' +
                                        '<span>设备</span>\n' +
                                        '</div>\n' +
                                        '<div class="result__text">'+equipmentSerial+'</div>\n' +
                                        '</div>';
                                }

                                var face_detect=d.obj[i].face_detect;
                                var face_detect_json = $.parseJSON(face_detect);

                                var age=face_detect_json.age
                                if (typeof(age) != "undefined"){
                                    st1=st1+'<div class="result__item">\n' +
                                        '<div class="result__title">\n' +
                                        '<span>年龄</span>\n' +
                                        '</div>\n' +
                                        '<div class="result__text">'+age+'</div>\n' +
                                        '</div>';
                                }

                                var beauty=face_detect_json.beauty
                                if (typeof(beauty) != "undefined"){
                                    st1=st1+'<div class="result__item">\n' +
                                        '<div class="result__title">\n' +
                                        '<span>魅力/span>\n' +
                                        '</div>\n' +
                                        '<div class="result__text">'+beauty+'</div>\n' +
                                        '</div>';
                                }

                                var race=face_detect_json.race
                                if (typeof(race) != "undefined"){

                                    var detect_type="";
                                    if (race.type=="yellow") detect_type='黄种人';
                                    if (race.type=="white") detect_type='白种人';
                                    if (race.type=="black") detect_type='黑种人';
                                    if (race.type=="arabs") detect_type='阿拉伯人';

                                    st1=st1+'<div class="result__item">\n' +
                                        '<div class="result__title">\n' +
                                        '<span>人种</span>\n' +
                                        '</div>\n' +
                                        '<div class="result__text">'+detect_type+'</div>\n' +
                                        '</div>';
                                }

                                var gender=face_detect_json.gender
                                if (typeof(gender) != "undefined"){
                                    var gender_type="";
                                    if (gender.type=="male") gender_type='男';
                                    if (gender.type=="female") gender_type='女';
                                    st1=st1+'<div class="result__item">\n' +
                                        '<div class="result__title">\n' +
                                        '<span>性别</span>\n' +
                                        '</div>\n' +
                                        '<div class="result__text">'+gender_type+'</div>\n' +
                                        '</div>';
                                }

                                var emotion=face_detect_json.emotion
                                if (typeof(emotion) != "undefined"){
                                    var detect_type="";
                                    if (emotion.type=="angry") detect_type='愤怒';
                                    if (emotion.type=="disgust") detect_type='厌恶';
                                    if (emotion.type=="fear") detect_type='恐惧';
                                    if (emotion.type=="happy") detect_type='高兴';
                                    if (emotion.type=="sad") detect_type='伤心';
                                    if (emotion.type=="surprise") detect_type='惊讶';
                                    if (emotion.type=="neutral") detect_type='无情绪';

                                    st1=st1+'<div class="result__item">\n' +
                                        '<div class="result__title">\n' +
                                        '<span>表情</span>\n' +
                                        '</div>\n' +
                                        '<div class="result__text">'+detect_type+'</div>\n' +
                                        '</div>';
                                }

                                var glasses=face_detect_json.glasses
                                if (typeof(glasses) != "undefined"){
                                    var detect_type="";
                                    if (glasses.type=="none") detect_type='无眼镜';
                                    if (glasses.type=="common") detect_type='普通眼镜';
                                    if (glasses.type=="sun") detect_type='墨镜';

                                    st1=st1+'<div class="result__item">\n' +
                                        '<div class="result__title">\n' +
                                        '<span>眼镜</span>\n' +
                                        '</div>\n' +
                                        '<div class="result__text">'+detect_type+'</div>\n' +
                                        '</div>';
                                }

                                var expression=face_detect_json.expression
                                if (typeof(expression) != "undefined"){
                                    var detect_type="";
                                    if (expression.type=="none") detect_type='不笑';
                                    if (expression.type=="smile") detect_type='微笑';
                                    if (expression.type=="laugh") detect_type='大笑';

                                    st1=st1+'<div class="result__item">\n' +
                                        '<div class="result__title">\n' +
                                        '<span>微笑</span>\n' +
                                        '</div>\n' +
                                        '<div class="result__text">'+detect_type+'</div>\n' +
                                        '</div>';
                                }
                                st1=st1+'</div>';
                                appendNumber=appendNumber+1;
                                swiper.appendSlide([
                                    '<div class="swiper-slide">' + st1 + '</div>',
                                ]);
                                swiper.slideTo(appendNumber, 1000, false);
                            }
                        }
                    }else{
                        tip('没有数据');
                    }
                    setTimeout('getFaceDetectForTime()', 6000);
                }
            });
        }
	</script>

</body>

</html>